<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block  slot="content">新增房间</block>
		</cu-custom>
		<form>
			<view class="cu-form-group">
				<view class="title">房间名</view>
				<input placeholder="请输入房间名" v-model="aroom.rname"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">面积㎡</view>
				<input type="number" placeholder="请输入面积" v-model="aroom.mj"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">容纳人数</view>
				<input type="number" placeholder="请输入人数" v-model="aroom.rnrs"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">瑜伽垫数</view>
				<input type="number" placeholder="请输入垫数" v-model="aroom.yjds"></input>
			</view>
			<view v-if="tps.length > 0" class="cu-form-group">
				<view class="title">房间类型</view>
				<zqs-select :list="tps" v-model="aroom.tp" title="选择房间类型" labelKey="value" valueKey="code"></zqs-select>
			</view>
			<view v-if="funcs.length > 0"  class="cu-form-group">
				<view class="title">房间功能</view>
				<zqs-select :list="funcs" v-model="aroom.func" title="选择房间功能" labelKey="value" valueKey="code"></zqs-select>
			</view>
			<view class="margin-top">
				<view class="cu-form-group">
					<view class="title">封面</view>
				</view>
				<cover-update v-model="aroom.cover" :idKey="'rm'+new Date().getTime()" />
			</view>
			<view class="margin-top">
				<img-update :idKey="aroom.storeid+'rm'+new Date().getTime()" class="margin-top" v-model="aroom.imgs" :size="4" />
			</view>
			<view class="margin-top bg-white padding">
				<view class="flex justify-between margin-bottom align-center">
					<text>门禁信息</text>
					<view class="text-xxl">
						<text @tap="addmj" class="cuIcon-roundaddfill text-blue"></text>
					</view>
				</view>
				<view>
					<view class="margin-top" v-for="(mj,index) in mjs" :key="index">
						<view class="cu-card bg-white shadow">
							<view class="cu-form-group flex justify-between align-center">
								<view class="flex justify-end align-center">
									<view  class="flex align-stretch">
										<text class="text-xl"><text :class="!mj.flg ? 'cuIcon-squarecheckfill' : 'cuIcon-square'" 
											class="text-blue"></text></text>
										<text>进门</text>
									</view>
									
									<!-- <view @tap="mjs[index].flg = !mjs[index].flg;" class="flex  justify-start align-stretch margin-left">
										<text class="text-xl"><text :class="mj.flg ? 'cuIcon-squarecheckfill' : 'cuIcon-square'" 
											class="text-blue"></text></text>
										<text>出门</text>
									</view> -->
									
									
								</view>
								
								<view class="text-xl">
									<!-- <text @tap="saveMj(mj)" class="cuIcon-edit text-blue"></text> -->
									<text @tap="rmmj(index)" class="cuIcon-deletefill text-red margin-left"></text>
								</view>
								
							</view>
							<view class="cu-form-group">
								<view class="title">型号：</view>
								<input class="solid" type="number" placeholder="请输入型号" v-model="mj.modelnumber"></input>
							</view>
							<view class="cu-form-group">
								<view class="title">序列号：</view>
								<input class="solid" type="number" placeholder="请输入序列号" v-model="mj.sn"></input>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="margin-top bg-white padding">
				<view class="flex justify-between align-center">
					<text>经营模式</text>
					<view class="">
						<text class="text-xl">
							<text @tap="setJyms('SD')" :class="aroom.jyms == 'SD' ? 'cuIcon-squarecheckfill text-blue' : 'cuIcon-square'" class="margin-right-sm">
								<text class="text-df">时段经营</text>
							</text>
							<!-- <text @tap="setJyms('DL')" :class="aroom.jyms == 'DL' ? 'cuIcon-squarecheckfill text-blue' : 'cuIcon-square'" class="margin-right-sm">
								<text class="text-df">包日经营</text>
							</text>
							
							<text @tap="setJyms('MT')" :class="aroom.jyms == 'MT' ? 'cuIcon-squarecheckfill text-blue' : 'cuIcon-square'" class="margin-right-sm">
								<text class="text-df">包月经营</text>
							</text> -->
						</text>
					</view>
				</view>
			</view>
			
			<view v-show="aroom.jyms == 'MT'" class="margin-top bg-white padding">
				<view class="flex justify-between align-center margin-bottom">
					<text>包月价格</text>
					<view class="text-xxl">
						<!-- <text @tap="addmlp" class="cuIcon-roundaddfill text-blue"></text> -->
					</view>
				</view>
				<view>
					<view v-for="(mp, index) in aroommonthlyprices" :key="index" class="margin-top-xs">
						<view class="flex justify-between align-center solid padding-sm ">
							<view class="flex justify-end align-center w-40">
								月价：<input class="solid w-50" v-model="mp.price" />分
							</view>
						</view>
					</view>
			
				</view>
			</view>
			
			<view v-show="aroom.jyms == 'DL'" class="margin-top bg-white padding">
				<view class="flex justify-between align-center margin-bottom">
					<text>包日价格</text>
					<view class="text-xxl">
						<!-- <text @tap="adddlp" class="cuIcon-roundaddfill text-blue"></text> -->
					</view>
				</view>
				<view>
					<view v-for="(dp, index) in aroomdailyprices" :key="index" class="margin-top-xs">
						<view class="flex justify-between align-center solid padding-sm ">
							<view class="flex justify-end align-center w-40">
								日价：<input class="solid w-50" v-model="dp.price" />分
							</view>
						</view>
					</view>
			
				</view>
			</view>

			<view v-show="aroom.jyms == 'SD'" class="margin-top bg-white padding">
				<view class="flex justify-between align-center margin-bottom">
					<text>营业时段</text>
					<view class="text-xxl">
						<text @tap="addhlp" class="cuIcon-roundaddfill text-blue"></text>
					</view>
				</view>
				<view>
					<view v-for="(hlp, index) in aroomhourlyprices" :key="index" class="margin-top-xs">
						<view class="flex justify-between align-center solid padding-sm ">
							<view @tap="aroomhourlyprices[index].stu = !aroomhourlyprices[index].stu;" 
								class="flex  justify-start align-stretch margin-left">
								<text class="text-xl"><text :class="hlp.stu ? 'cuIcon-squarecheckfill' : 'cuIcon-square'" 
									class="text-blue"></text></text>
							</view>
							
							
							<picker class="w-20" mode="time" :value="hlp.st" start="00:00" end="23:59" @change="timeChange($event, hlp, 'st')">
								<view style="height: 1.7rem;" class="solid flex justify-center align-center">{{hlp.st}}</view>
							</picker>
							<picker  class="w-20" mode="time" :value="hlp.et" start="00:00" end="23:59" @change="timeChange($event, hlp, 'et')">
								<view style="height: 1.7rem;" class="solid flex justify-center align-center">{{hlp.et}}</view>
							</picker>
							<view class="flex justify-end align-center w-40">
								单价：<input class="solid w-50" v-model="hlp.price" />分
							</view>
							<view class="text-xl">
								<text @tap="rmhlp(index)" class="cuIcon-deletefill text-red margin-left"></text>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="padding ">
				<button @click="save" class="cu-btn block bg-blue lg">保存</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				aroom: {
					roomid: "",
					storeid: "",
					rname: "",
					imgs: [],
					mj: "",
					rnrs: "",
					yjds: "",
					cover: "",
					jyms: "SD"
				},
				aroomdailyprices: [],
				aroommonthlyprices: [],
				aroomhourlyprices: [],
				mjs: [],
				temps: [],
				tps: [],
				funcs: []
			};
		},
		created: function() {
			this.constant.get("ROOMFUNC").then(data => {
				this.funcs = data.dicts;
			});
			this.constant.get("ROOMTP").then(data => {
				this.tps = data.dicts;
			});
		},
		onLoad: function(option) {
			this.aroom.storeid = option.storeid;
			this.getTemp();
		},
		methods: {
			setJyms: function(ms) {
				this.aroom.jyms = ms;
			},
			addmj: function() {
				this.mjs.push({
					mjid: "",
					flg: false,
					modelmumber: "F014",
					uid: "",
					ukey: "",
					sn: "",
					statu: true,
					dflg: false,
					storeid: this.aroom.storeid,
				});
			},
			rmmj: function(index) {
				if (this.mjs[index].mjid) {
					this.api("/mj/info/del").send({
						mjid: this.mjs[index].mjid
					}).then(data => {
						this.message.info("删除成功");
						this.mjs.splice(index, 1);
					});
				} else {
					this.mjs.splice(index, 1);
				}
			},
			saveMj: function(mj) {
				if (mj.mjid) {
					this.api("/mj/info/put").send(mj).then(data => {
						this.message.info("修改门禁成功");
					});
				} else {
					this.api.post("/mj/info").send(mj).then(data => {
						this.message.info("新增门禁成功");
					});
				}
			},
			
			
			getTemp: function() {
				
				this.api("/room/temp").send({roomid: "temp"}).then(data => {
					this.temps = data.aroomhourlyprices;
					for (let index in this.temps) {
						this.aroomhourlyprices.push({
							price: this.temps[index].price,
							st: this.temps[index].st,
							et: this.temps[index].et,
							stu: true
						});
					}
					
					for (let index in data.aroomdailyprices) {
						let item = data.aroomdailyprices[index];
						item.did = "";
						item.roomid = "";
						this.aroomdailyprices.push(item);
					}
					
					for (let index in data.aroommonthlyprices) {
						let item = data.aroommonthlyprices[index];
						item.mid = "";
						item.roomid = "";
						this.aroommonthlyprices.push(item);
					}
				});


			},
			save: function() {
				if (!this.aroom.rname) {
					this.message.error("请设置房间名");
					return;
				}
				
				if (!this.aroom.cover) {
					this.message.error("请设置房间封面");
					return;
				}
				
				if (this.aroom.imgs.length == 0) {
					this.message.error("至少上传一个图片");
					return;
				}
				
				
				if (this.mjs.length < 1) {
					this.message.error("至少设置一个门禁");
					return;
				}

				this.api("/room/info").send({
					aroom: this.aroom,
					mjs: this.mjs,
					aroomhourlyprices: this.aroomhourlyprices
				}).then(data => {
					this.message.info("新增房间成功");
					uni.navigateBack();
				});
				
			},


			mjFlgChange: function(e, mj) {
				mj.flg = e.detail.value;
			},
			addhlp: function() {
				this.aroomhourlyprices.push({
					price: 50,
					st: "00:00",
					et: "00:00",
					stu: true
				});
			},
			rmhlp: function(index) {
				this.aroomhourlyprices.splice(index, 1);
			},

			timeChange: function(e, hpl, tag) {
				hpl[tag] = e.detail.value;
			},
		}
	}
</script>

<style>
</style>